<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="stylesheet" type="text/css" href="../../../css/mui.min.css" />
	<style type="text/css">
		body{
			background-color: #F7F7F7;
		}
		.tab {
			height: 40px;
			display: flex;
			position: relative;
			background-color: #fff;
		}

		.item {
			flex: 1;
			line-height: 40px;
			font-size: 16px;
			text-align: center;
		}

		.tab-icon {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100px;
			height: 2px;
			transition: all .35s;
			background-color: #4FA7E6;
		}
		.active{
			color: #4FA7E6;
		}
	</style>
</head>

<body>
	<div class="tab" id="app">
		<div class="item" 
		v-for="item in list" 
		v-text="item.title" 
		:data-wid='item.wid'
		:class="item.wid==id?'active':''"
	></div>
		<div class="tab-icon" :style="id == 'issue'? 'left: 12%':'left:62%' "></div>
	</div>
	<script src="../../../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../js/webviewGroup.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		mui.init()
		mui.plusReady(function(){
			var _self = plus.webview.currentWebview();
			initialize(_self)
		})
		var app = new Vue({
			el: '#app',
			data: {
				id: 'issue',
				list: [{
					title: '我发布过的',
					wid: 'issue',
				}, {
					title: '我参加过的',
					wid: 'join',
				}]
			}
		})
		
		function initialize(_self) {
			var group = new webviewGroup(_self.id, {
				items: [{
					id: "issue",
					url: "myIssue.html",
					styles: {
						top: '85px', //mui标题栏默认高度为45px；
						bottom: '0' //默认为0px，可不定义；
					},
					extras: {}
				},{
					id: "join",
					url: "myJoin.html",
					styles: {
						top: '85px', //mui标题栏默认高度为45px；
						bottom: '0' //默认为0px，可不定义；
					},
					extras: {},
				}]
			});
			
			mui(".tab").on("tap", ".item", function(e) {
					var wid = this.getAttribute("data-wid");
					app.id = wid;
					console.log(wid);
					group.switchTab(wid);
				});
		}
	</script>
</body>

</html>
